@extends("ogreencard/layout/layout")
@section('h1',"订单管理")
@section("h2","订单编辑、添加")
@section("content")
    <style>
        .hide{display: none;}
    </style>
    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <button class="layui-btn layui-btn-sm layui-btn-normal nav nav1"  onclick="nav(1)" > 微信订单 </button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary nav nav2" onclick="nav(2)">POS机订单</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary nav nav3" onclick="nav(3)"> 手工订单</button>
                </div>
            </div>

            <div class="layui-card">
                <form class="layui-form" id="order-1">
                    <input type="hidden" name="orderType" value="wx">
                    <input type="hidden" name="_token" id="token1" value="{{csrf_token()}}">

                    <div class="layui-card-header">
                        <a class="layui-btn" href="/ogreencard/file/order-card.xlsx"><i class="layui-icon">&#xe601;</i>下载模板</a>
                        <a class="layui-btn layui-btn-danger" id="upload"><i class="layui-icon">&#xe681;</i>表格导入</a>
                    </div>



                    <div class="layui-card-body layui-table-body layui-table-main">
                        <table class="layui-table layui-form">
                            <thead>
                                <tr>
                                    <th>卡号</th>
                                    <th>密码</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                @for($i=0;$i<20;$i++)
                                <tr class="{{$i>0?'hide':''}} cardTh" data-id="{{$i}}">
                                    <td><input type="text" class="layui-input code" name="code[]"></td>
                                    <td><input type="text" class="layui-input pwd" name="pwd[]"></td>
                                    <td class="td-status"><span class="layui-btn  layui-btn-mini msg hide">有效</span></td>
                                    <td class="td-manage">
                                        <a title="删除" onclick="member_del(this)" href="javascript:;">
                                            <i class="layui-icon"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endfor
                                <tr>
                                    <td colspan="4" style="text-align: center;">
                                        <p class="layui-btn layui-btn-primary" onclick="table_add()">
                                            <i class="layui-icon icon iconfont">&#xe61a;</i>新增表格</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label"></label>
                        <button class="layui-btn" lay-filter="add" lay-submit="">确定</button>
                    </div>
                    <br>
                </form>

                <form class="layui-form hide" id="order-2">
                    <br>
                    <input type="hidden" name="_token" id="token2" value="{{csrf_token()}}">
                    <input type="hidden" name="orderType" value="pos">
                    <div class="layui-form-item">
                        <label for="username" class="layui-form-label">
                            <span class="x-red">*</span>流水号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="tradeCode" required="" lay-verify="required" autocomplete="off" class="layui-input"></div>
                    </div>
                    <div class="layui-form-item">
                        <label for="username" class="layui-form-label">
                            <span class="x-red">*</span>积分数量</label>
                        <div class="layui-input-inline">
                            <input type="text"  name="totalPrice" required="" lay-verify="required" autocomplete="off" class="layui-input"></div>
                    </div>
                    <div class="layui-form-item">
                        <label for="L_repass" class="layui-form-label"></label>
                        <button class="layui-btn" lay-filter="add" lay-submit="">增加</button>
                    </div>
                    <br>
                </form>


                <form class="layui-form hide " id="order-3">
                    <br>
                    <input type="hidden" name="orderType" value="sg">
                    <input type="hidden" name="_token" id="token3" value="{{csrf_token()}}">
                    <div class="layui-form-item">
                        <label for="username" class="layui-form-label"><span class="x-red">*</span>积分数量</label>
                        <div class="layui-input-inline">
                            <input type="text" name="totalPrice" required="" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="L_repass" class="layui-form-label"></label>
                        <button class="layui-btn" lay-filter="add" lay-submit="">增加</button>
                    </div>
                    <br>
                </form>
            </div>
        </div>
    </div>

    <script>

        function nav(n){
            $('.nav').removeClass("layui-btn-normal").addClass("layui-btn-primary");
            $(".nav"+n).removeClass("layui-btn-primary").addClass("layui-btn-normal");
            $('form').addClass("hide");
            $("#order-"+n).removeClass("hide");
        }

        layui.use(['form', 'layer','upload'], function ()
        {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;


            layui.upload.render({
                elem:"#upload",
                url:"./orderCard",
                accept:"file",
                acceptMime:'.xls,.xlsx',
                field:"excel",
                data:{_token:$("#token1").val()},
                done:function(res){

                    if(res.code == 200) {
                        var cards = res.cards;
                        var len = cards.length;
                        for(var i=0;i<len;i++)
                        {
                            var c = cards[i];
                            var table =$("tr.hide").eq(0);
                            table.find(".code").val(c.code);
                            table.find(".pwd").val(c.pwd);
                            table.find('.msg').text(c.msg);
                            if(c.valid == 0){
                                table.find('.msg').addClass("layui-btn-warm").removeClass("hide");
                            }else{
                                table.find('.msg').addClass("layui-btn-normal").removeClass("hide");
                            }

                            table.removeClass("hide");
                        }

                    }else{
                        layer.msg(res.msg,{icon:7},function(){})
                    }
                },
                error:function(){

                }
            })


            //监听提交
            form.on('submit(add)', function (data) {

                console.log(data.field);

                //发异步，把数据提交给php
                $.post({
                    url:"./orderCard",
                    data:data.field,
                    success:function(res){
                        if(res.code != 200){
                            return layer.alert(res.msg,{icon:7});
                        }
                       location.href = "./orderEdit?id=0";

                        return false;
                    }
                })
                return false;
            });


            function check_sing_card(){
                var th = $(this).parents(".cardTh");
                var code = th.find(".code").eq(0).val();
                var pwd = th.find(".pwd").eq(0).val();
                if(!(code && pwd)){
                    return;
                }

                $.get({
                    url:"./checkCardValid",
                    data:{code:code,pwd:pwd},
                    success:function(res){
                        var msgEle = th.find(".msg").eq(0).text(res.msg).removeClass("hide")
                        if(res.code == 200){

                            msgEle.addClass("layui-btn-normal").removeClass("layui-btn-warm");
                        }else{
                            msgEle.addClass("layui-btn-warm").removeClass("layui-btn-normal");
                        }
                    }
                })
            }

            $(".cardTh .code").on("change",check_sing_card);
            $(".cardTh .pwd").on("change",check_sing_card);

        });


        function member_del(obj){
            $(obj).parents("tr").remove();
        }

        function table_add(){
            $('table tr.hide').eq(0).removeClass("hide");
        }



    </script>

@endsection